import { FC, createContext, useContext } from 'react'
import imgSrc from './provider.jpg'

/**
 * 共享数据
 * const AppContext = createContext({})
 * 创建一个 React 的 上下文（context）
 * 
 * const { name } = useContext(AppContext)
 * 使用 useContext 获取上下文
 * 
 * createContext 和 useContext 结合使用实现方法共享
 * 
 * 父组件
 * Provider 提供上下文 value
 * <AppContext.Provider value={{ name: 'data' }}> 子组件 </AppContext.Provider>
 * 
 * 子组件
 * useContext 解析上下文
 * const { name }: any = useContext(AppContext)
 * 
 */
const AppContext = createContext('')

/**
 * 各个组件可以通过:
 * 共享状态钩子 createContext
 * 来获取共享数据
 */

// 组件A
const A: FC = () => {
	const name = useContext(AppContext)
	return (
		<>
			<span>
				A: <b>{name}</b>
			</span>
		</>
	)
}

// 组件B
const B: FC = () => {
	const name = useContext(AppContext)
	return (
		<>
			<span>
				B: <b>{name}</b>
			</span>
		</>
	)
}

// 组件Foo
const Foo: FC = () => {
	return (
		<AppContext.Provider value='data'>
			<span>C =&gt; 我是Provider组件: </span>
			<A></A> <B></B>
			<img src={imgSrc} alt="provider的作用" style={{ width: '100%' }} />
		</AppContext.Provider>
	)
}
export default Foo
